<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兴趣交友测试 - 发现你的同好</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #6366f1;
            --primary-light: #f0f9ff;
            --secondary: #64748b;
            --light: #f8fafc;
            --dark: #1e293b;
            --success: #10b981;
            --danger: #ef4444;
            --warning: #f59e0b;
            --border: #e2e8f0;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            --shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f8fafc;
            color: var(--dark);
            line-height: 1.6;
        }
        
        .navbar {
            box-shadow: var(--shadow);
            background-color: white;
        }
        
        .container {
            padding: 2rem 0;
        }
        
        .section-header {
            margin-bottom: 2.5rem;
        }
        
        .section-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        
        .section-subtitle {
            color: var(--secondary);
            max-width: 800px;
        }
        
        /* 筛选区域 */
        .filters-container {
            background-color: white;
            border-radius: 1rem;
            box-shadow: var(--shadow);
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .filter-section {
            margin-bottom: 1.5rem;
        }
        
        .filter-title {
            font-weight: 600;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .filter-title i {
            color: var(--primary);
        }
        
        .search-bar {
            position: relative;
            margin-bottom: 1.5rem;
        }
        
        .search-input {
            width: 100%;
            padding: 0.75rem 1rem 0.75rem 2.5rem;
            border: 1px solid var(--border);
            border-radius: 0.5rem;
            font-size: 0.95rem;
        }
        
        .search-icon {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--secondary);
        }
        
        .checkbox-group, .radio-group {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        .form-check {
            margin-bottom: 0.5rem;
        }
        
        .form-check-input:checked {
            background-color: var(--primary);
            border-color: var(--primary);
        }
        
        .range-slider {
            width: 100%;
            margin: 1rem 0;
        }
        
        .range-labels {
            display: flex;
            justify-content: space-between;
            color: var(--secondary);
            font-size: 0.875rem;
        }
        
        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border);
        }
        
        .btn-reset {
            background-color: var(--light);
            color: var(--secondary);
            border: 1px solid var(--border);
        }
        
        .btn-reset:hover {
            background-color: var(--border);
        }
        
        .btn-apply {
            background-color: var(--primary);
            color: white;
            border: none;
        }
        
        .btn-apply:hover {
            background-color: #4f46e5;
        }
        
        /* 视图切换 */
        .view-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .view-options {
            display: flex;
            gap: 0.5rem;
        }
        
        .view-btn {
            background-color: white;
            border: 1px solid var(--border);
            border-radius: 0.5rem;
            padding: 0.5rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .view-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .sort-select {
            border: 1px solid var(--border);
            border-radius: 0.5rem;
            padding: 0.5rem 1rem;
            background-color: white;
        }
        
        /* 分类导航 */
        .category-nav {
            display: flex;
            overflow-x: auto;
            padding-bottom: 0.5rem;
            margin-bottom: 2rem;
            gap: 0.75rem;
            scrollbar-width: thin;
        }
        
        .category-nav::-webkit-scrollbar {
            height: 4px;
        }
        
        .category-nav::-webkit-scrollbar-thumb {
            background-color: var(--primary-light);
            border-radius: 4px;
        }
        
        .category-item {
            background-color: white;
            border: 1px solid var(--border);
            border-radius: 999px;
            padding: 0.5rem 1.25rem;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.2s;
            font-weight: 500;
        }
        
        .category-item:hover {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .category-item.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 测试卡片基础样式 */
        .test-card {
            background-color: white;
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: transform 0.3s, box-shadow 0.3s;
            margin-bottom: 1.5rem;
        }
        
        .test-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }
        
        .test-content {
            padding: 1.5rem;
        }
        
        .test-header {
            margin-bottom: 1rem;
        }
        
        .test-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            transition: color 0.2s;
        }
        
        .test-card:hover .test-title {
            color: var(--primary);
        }
        
        .test-meta {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--secondary);
            font-size: 0.875rem;
            margin-bottom: 1rem;
        }
        
        .test-author {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        .author-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .test-description {
            color: var(--secondary);
            font-size: 0.95rem;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .test-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .test-tag {
            background-color: var(--light);
            color: var(--secondary);
            padding: 0.25rem 0.75rem;
            border-radius: 999px;
            font-size: 0.8rem;
        }
        
        .test-stats {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 1rem;
            border-top: 1px solid var(--border);
            font-size: 0.875rem;
        }
        
        .stat-group {
            display: flex;
            align-items: center;
            gap: 1.25rem;
            color: var(--secondary);
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        .test-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: var(--secondary);
            display: flex;
            align-items: center;
            gap: 0.35rem;
            cursor: pointer;
            transition: color 0.2s;
            padding: 0.25rem;
        }
        
        .action-btn:hover {
            color: var(--primary);
        }
        
        .action-btn.liked {
            color: var(--danger);
        }
        
        .action-btn.saved {
            color: var(--primary);
        }
        
        .take-test-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 0.5rem 1.25rem;
            border-radius: 0.5rem;
            font-weight: 500;
            transition: background-color 0.2s;
            margin-left: auto;
        }
        
        .take-test-btn:hover {
            background-color: #4f46e5;
        }
        
        /* 不同布局样式 */
        /* 无图片布局 */
        .no-image-card {
            border-left: 4px solid var(--primary);
        }
        
        /* 单图片布局 */
        .single-image-card .test-media {
            height: 200px;
            position: relative;
        }
        
        .single-image-card .test-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 多图片布局 */
        .multi-image-card .test-media {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 1fr;
            height: 160px;
            gap: 2px;
        }
        
        .multi-image-card .test-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .multi-image-card .image-count {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }
        
        /* 网格布局 */
        .grid-layout {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        
        /* 列表布局 */
        .list-layout {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        
        .list-item {
            display: flex;
            height: 200px;
        }
        
        .list-item .test-media {
            flex: 0 0 30%;
            height: 100%;
        }
        
        .list-item .test-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .list-item .test-content {
            flex: 0 0 70%;
            display: flex;
            flex-direction: column;
        }
        
        .list-item .test-stats {
            margin-top: auto;
        }
        
        /* 紧凑布局 */
        .compact-layout {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .compact-item {
            display: flex;
            align-items: center;
            padding: 1rem;
            background-color: white;
            border-radius: 0.75rem;
            box-shadow: var(--shadow);
            transition: all 0.2s;
        }
        
        .compact-item:hover {
            transform: translateX(5px);
            box-shadow: var(--shadow-hover);
        }
        
        .compact-item .test-info {
            flex: 1;
            margin-left: 1rem;
        }
        
        .compact-item .test-title {
            font-size: 1rem;
            margin-bottom: 0.25rem;
        }
        
        .compact-item .test-meta {
            margin-bottom: 0;
            font-size: 0.8rem;
        }
        
        .compact-item .test-stats {
            padding-top: 0;
            border-top: none;
            margin-left: 1rem;
        }
        
        /* 筛选结果提示 */
        .filter-results {
            background-color: var(--primary-light);
            border-left: 4px solid var(--primary);
            padding: 1rem;
            margin-bottom: 1.5rem;
            border-radius: 0.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .active-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }
        
        .active-filter-tag {
            background-color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 999px;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .remove-filter {
            color: var(--secondary);
            cursor: pointer;
            font-weight: bold;
        }
        
        .remove-filter:hover {
            color: var(--danger);
        }
        
        /* 分页 */
        .pagination-container {
            display: flex;
            justify-content: center;
            margin-top: 2rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .list-item {
                flex-direction: column;
                height: auto;
            }
            
            .list-item .test-media {
                flex: none;
                height: 200px;
            }
            
            .list-item .test-content {
                flex: none;
                width: 100%;
            }
            
            .compact-item {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .compact-item .test-stats {
                margin-left: 0;
                margin-top: 1rem;
                width: 100%;
            }
        }
        
        @media (max-width: 768px) {
            .section-title {
                font-size: 1.75rem;
            }
            
            .test-stats {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .test-actions {
                width: 100%;
                justify-content: space-between;
            }
            
            .take-test-btn {
                margin-left: 0;
                width: 100%;
            }
            
            .filter-actions {
                flex-direction: column;
            }
            
            .btn-reset, .btn-apply {
                width: 100%;
            }
            
            .view-controls {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fas fa-compass text-primary me-2"></i>兴趣社交
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">兴趣测试</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">交友推荐</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">社区</a>
                    </li>
                </ul>
                <div class="d-flex align-items-center gap-3">
                    <button class="btn btn-outline-primary">登录</button>
                    <button class="btn btn-primary">注册</button>
                </div>
            </div>
        </div>
    </nav>
    
    <!-- 主要内容区 -->
    <div class="container">
        <div class="section-header">
            <h1 class="section-title">兴趣交友测试</h1>
            <p class="section-subtitle">通过多种筛选方式找到最适合你的兴趣测试，结识志同道合的朋友。完成测试后，我们会根据你的结果推荐匹配度最高的伙伴。</p>
        </div>
        
        <div class="row">
            <!-- 左侧筛选面板 -->
            <div class="col-lg-3 mb-4">
                <div class="filters-container">
                    <div class="search-bar">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" class="search-input" placeholder="搜索测试名称、标签或作者...">
                    </div>
                    
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-tags"></i>兴趣类别
                        </h3>
                        <div class="checkbox-group">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="category1" checked>
                                <label class="form-check-label" for="category1">
                                    音乐
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="category2" checked>
                                <label class="form-check-label" for="category2">
                                    电影
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="category3" checked>
                                <label class="form-check-label" for="category3">
                                    旅行
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="category4">
                                <label class="form-check-label" for="category4">
                                    美食
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="category5">
                                <label class="form-check-label" for="category5">
                                    运动
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="category6">
                                <label class="form-check-label" for="category6">
                                    阅读
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="category7">
                                <label class="form-check-label" for="category7">
                                    游戏
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="category8">
                                <label class="form-check-label" for="category8">
                                    艺术
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-clock"></i>测试时长
                        </h3>
                        <div class="radio-group">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="duration" id="duration1" checked>
                                <label class="form-check-label" for="duration1">
                                    全部时长
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="duration" id="duration2">
                                <label class="form-check-label" for="duration2">
                                    5分钟以内
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="duration" id="duration3">
                                <label class="form-check-label" for="duration3">
                                    5-10分钟
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="duration" id="duration4">
                                <label class="form-check-label" for="duration4">
                                    10分钟以上
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-user-check"></i>参与人数
                        </h3>
                        <input type="range" min="0" max="10000" value="5000" class="form-range range-slider" id="participantsRange">
                        <div class="range-labels">
                            <span>0</span>
                            <span id="rangeValue">5,000+</span>
                            <span>10,000+</span>
                        </div>
                    </div>
                    
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-star"></i>测试评分
                        </h3>
                        <div class="radio-group">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="rating" id="rating1" checked>
                                <label class="form-check-label" for="rating1">
                                    全部评分
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="rating" id="rating2">
                                <label class="form-check-label" for="rating2">
                                    4星以上
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="rating" id="rating3">
                                <label class="form-check-label" for="rating3">
                                    3星以上
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-calendar-alt"></i>发布时间
                        </h3>
                        <div class="radio-group">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="time" id="time1" checked>
                                <label class="form-check-label" for="time1">
                                    全部时间
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="time" id="time2">
                                <label class="form-check-label" for="time2">
                                    最近一周
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="time" id="time3">
                                <label class="form-check-label" for="time3">
                                    最近一月
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="time" id="time4">
                                <label class="form-check-label" for="time4">
                                    最近三月
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="filter-actions">
                        <button class="btn btn-reset">
                            <i class="fas fa-sync-alt me-1"></i>重置筛选
                        </button>
                        <button class="btn btn-apply">
                            <i class="fas fa-filter me-1"></i>应用筛选
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 右侧测试列表 -->
            <div class="col-lg-9">
                <!-- 筛选结果提示 -->
                <div class="filter-results">
                    <div>
                        <strong>找到 12 个符合条件的测试</strong>
                        <div class="active-filters">
                            <div class="active-filter-tag">
                                兴趣类别: 音乐, 电影, 旅行
                                <span class="remove-filter">×</span>
                            </div>
                            <div class="active-filter-tag">
                                参与人数: 5,000+
                                <span class="remove-filter">×</span>
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-times me-1"></i>清除全部
                    </button>
                </div>
                
                <!-- 视图切换和排序 -->
                <div class="view-controls">
                    <div class="view-options">
                        <button class="view-btn active" data-view="grid" title="网格视图">
                            <i class="fas fa-th"></i>
                        </button>
                        <button class="view-btn" data-view="list" title="列表视图">
                            <i class="fas fa-list"></i>
                        </button>
                        <button class="view-btn" data-view="compact" title="紧凑视图">
                            <i class="fas fa-th-list"></i>
                        </button>
                    </div>
                    <div>
                        <select class="sort-select">
                            <option value="popular">按热门程度</option>
                            <option value="newest">最新发布</option>
                            <option value="participants">参与人数最多</option>
                            <option value="rating">评分最高</option>
                        </select>
                    </div>
                </div>
                
                <!-- 快速分类导航 -->
                <div class="category-nav">
                    <div class="category-item active">全部结果</div>
                    <div class="category-item">热门推荐</div>
                    <div class="category-item">新上线</div>
                    <div class="category-item">好友参与过</div>
                    <div class="category-item">高匹配度</div>
                </div>
                
                <!-- 测试列表 - 网格布局 -->
                <div class="test-list grid-layout">
                    <!-- 无图片测试 -->
                    <div class="test-card no-image-card">
                        <div class="test-content">
                            <div class="test-header">
                                <h3 class="test-title">你的音乐品味如何？找到同好</h3>
                                <div class="test-meta">
                                    <span class="test-author">
                                        <img src="https://picsum.photos/100/100?random=102" alt="李哲的头像" class="author-avatar">
                                        李哲
                                    </span>
                                    <span>·</span>
                                    <span>发布于 1周前</span>
                                </div>
                            </div>
                            <p class="test-description">通过分析你对不同音乐风格的偏好，找到与你音乐品味最契合的朋友，一起分享新歌和演唱会信息。</p>
                            <div class="test-tags">
                                <span class="test-tag">音乐</span>
                                <span class="test-tag">兴趣爱好</span>
                            </div>
                            <div class="test-stats">
                                <div class="stat-group">
                                    <div class="stat-item">
                                        <i class="fas fa-eye"></i>
                                        <span>8,742</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-comment"></i>
                                        <span>512</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-user-check"></i>
                                        <span>3,842人已测试</span>
                                    </div>
                                </div>
                                <div class="test-actions">
                                    <button class="action-btn">
                                        <i class="far fa-heart"></i>
                                        <span>1,542</span>
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i>
                                        <span>753</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 单图片测试 -->
                    <div class="test-card single-image-card">
                        <div class="test-media">
                            <img src="https://picsum.photos/600/400?random=20" alt="旅行风格测试图片" class="test-image">
                        </div>
                        <div class="test-content">
                            <div class="test-header">
                                <h3 class="test-title">你的旅行风格是什么？寻找完美旅伴</h3>
                                <div class="test-meta">
                                    <span class="test-author">
                                        <img src="https://picsum.photos/100/100?random=101" alt="张雨晴的头像" class="author-avatar">
                                        张雨晴
                                    </span>
                                    <span>·</span>
                                    <span>发布于 2周前</span>
                                </div>
                            </div>
                            <p class="test-description">通过12道题测试你的旅行偏好：你是冒险探索者、文化体验者还是休闲放松派？找到与你旅行风格最匹配的伙伴。</p>
                            <div class="test-tags">
                                <span class="test-tag">旅行</span>
                                <span class="test-tag">性格</span>
                            </div>
                            <div class="test-stats">
                                <div class="stat-group">
                                    <div class="stat-item">
                                        <i class="fas fa-eye"></i>
                                        <span>12,587</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-comment"></i>
                                        <span>842</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-user-check"></i>
                                        <span>5,321人已测试</span>
                                    </div>
                                </div>
                                <div class="test-actions">
                                    <button class="action-btn liked">
                                        <i class="fas fa-heart"></i>
                                        <span>2,154</span>
                                    </button>
                                    <button class="action-btn saved">
                                        <i class="fas fa-bookmark"></i>
                                        <span>987</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 多图片测试 -->
                    <div class="test-card multi-image-card">
                        <div class="test-media" style="position: relative;">
                            <img src="https://picsum.photos/300/300?random=31" alt="电影类型测试图片1" class="test-image">
                            <img src="https://picsum.photos/300/300?random=32" alt="电影类型测试图片2" class="test-image">
                            <img src="https://picsum.photos/300/300?random=33" alt="电影类型测试图片3" class="test-image">
                            <div class="image-count">+5</div>
                        </div>
                        <div class="test-content">
                            <div class="test-header">
                                <h3 class="test-title">你的电影偏好图谱测试</h3>
                                <div class="test-meta">
                                    <span class="test-author">
                                        <img src="https://picsum.photos/100/100?random=104" alt="刘阳的头像" class="author-avatar">
                                        刘阳
                                    </span>
                                    <span>·</span>
                                    <span>发布于 5天前</span>
                                </div>
                            </div>
                            <p class="test-description">从类型、导演到观影习惯，全面分析你的电影品味，找到可以彻夜讨论电影的同好。</p>
                            <div class="test-tags">
                                <span class="test-tag">电影</span>
                                <span class="test-tag">兴趣爱好</span>
                            </div>
                            <div class="test-stats">
                                <div class="stat-group">
                                    <div class="stat-item">
                                        <i class="fas fa-eye"></i>
                                        <span>7,842</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-comment"></i>
                                        <span>476</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-user-check"></i>
                                        <span>3,254人已测试</span>
                                    </div>
                                </div>
                                <div class="test-actions">
                                    <button class="action-btn">
                                        <i class="far fa-heart"></i>
                                        <span>1,876</span>
                                    </button>
                                    <button class="action-btn saved">
                                        <i class="fas fa-bookmark"></i>
                                        <span>642</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 无图片测试 -->
                    <div class="test-card no-image-card">
                        <div class="test-content">
                            <div class="test-header">
                                <h3 class="test-title">音乐 festivals 爱好者测试</h3>
                                <div class="test-meta">
                                    <span class="test-author">
                                        <img src="https://picsum.photos/100/100?random=108" alt="黄小明的头像" class="author-avatar">
                                        黄小明
                                    </span>
                                    <span>·</span>
                                    <span>发布于 3天前</span>
                                </div>
                            </div>
                            <p class="test-description">测试你对各类音乐节的了解和喜好，找到可以一起参加音乐节的朋友，共享现场音乐的魅力。</p>
                            <div class="test-tags">
                                <span class="test-tag">音乐</span>
                                <span class="test-tag">现场演出</span>
                            </div>
                            <div class="test-stats">
                                <div class="stat-group">
                                    <div class="stat-item">
                                        <i class="fas fa-eye"></i>
                                        <span>5,214</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-comment"></i>
                                        <span>326</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-user-check"></i>
                                        <span>2,187人已测试</span>
                                    </div>
                                </div>
                                <div class="test-actions">
                                    <button class="action-btn liked">
                                        <i class="fas fa-heart"></i>
                                        <span>987</span>
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i>
                                        <span>421</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 单图片测试 -->
                    <div class="test-card single-image-card">
                        <div class="test-media">
                            <img src="https://picsum.photos/600/400?random=21" alt="独立电影测试图片" class="test-image">
                        </div>
                        <div class="test-content">
                            <div class="test-header">
                                <h3 class="test-title">独立电影爱好者测试</h3>
                                <div class="test-meta">
                                    <span class="test-author">
                                        <img src="https://picsum.photos/100/100?random=109" alt="陈思远的头像" class="author-avatar">
                                        陈思远
                                    </span>
                                    <span>·</span>
                                    <span>发布于 1周前</span>
                                </div>
                            </div>
                            <p class="test-description">探索你对独立电影的认知和喜好，找到同样热爱小众电影的朋友，分享那些不为人知的佳作。</p>
                            <div class="test-tags">
                                <span class="test-tag">电影</span>
                                <span class="test-tag">独立文化</span>
                            </div>
                            <div class="test-stats">
                                <div class="stat-group">
                                    <div class="stat-item">
                                        <i class="fas fa-eye"></i>
                                        <span>4,125</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-comment"></i>
                                        <span>287</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-user-check"></i>
                                        <span>1,753人已测试</span>
                                    </div>
                                </div>
                                <div class="test-actions">
                                    <button class="action-btn">
                                        <i class="far fa-heart"></i>
                                        <span>842</span>
                                    </button>
                                    <button class="action-btn saved">
                                        <i class="fas fa-bookmark"></i>
                                        <span>326</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 多图片测试 -->
                    <div class="test-card multi-image-card">
                        <div class="test-media" style="position: relative;">
                            <img src="https://picsum.photos/300/300?random=34" alt="背包旅行测试图片1" class="test-image">
                            <img src="https://picsum.photos/300/300?random=35" alt="背包旅行测试图片2" class="test-image">
                            <img src="https://picsum.photos/300/300?random=36" alt="背包旅行测试图片3" class="test-image">
                        </div>
                        <div class="test-content">
                            <div class="test-header">
                                <h3 class="test-title">背包旅行风格测试</h3>
                                <div class="test-meta">
                                    <span class="test-author">
                                        <img src="https://picsum.photos/100/100?random=110" alt="赵天宇的头像" class="author-avatar">
                                        赵天宇
                                    </span>
                                    <span>·</span>
                                    <span>发布于 4天前</span>
                                </div>
                            </div>
                            <p class="test-description">测试你的背包旅行偏好：住宿选择、行程安排、预算控制，找到理想的背包旅行伙伴。</p>
                            <div class="test-tags">
                                <span class="test-tag">旅行</span>
                                <span class="test-tag">背包客</span>
                            </div>
                            <div class="test-stats">
                                <div class="stat-group">
                                    <div class="stat-item">
                                        <i class="fas fa-eye"></i>
                                        <span>6,842</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-comment"></i>
                                        <span>412</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-user-check"></i>
                                        <span>2,965人已测试</span>
                                    </div>
                                </div>
                                <div class="test-actions">
                                    <button class="action-btn liked">
                                        <i class="fas fa-heart"></i>
                                        <span>1,425</span>
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i>
                                        <span>587</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 分页 -->
                <div class="pagination-container">
                    <ul class="pagination">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Previous">
                                <i class="fas fa-chevron-left"></i>
                            </a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#" aria-label="Next">
                                <i class="fas fa-chevron-right"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 参与人数滑块交互
            const rangeSlider = document.getElementById('participantsRange');
            const rangeValue = document.getElementById('rangeValue');
            
            rangeSlider.addEventListener('input', function() {
                rangeValue.textContent = `${this.value.toLocaleString()}+`;
            });
            
            // 视图切换功能
            const viewBtns = document.querySelectorAll('.view-btn');
            const testList = document.querySelector('.test-list');
            
            viewBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    // 移除所有按钮的活跃状态
                    viewBtns.forEach(b => b.classList.remove('active'));
                    
                    // 添加当前按钮的活跃状态
                    this.classList.add('active');
                    
                    // 获取视图类型
                    const viewType = this.getAttribute('data-view');
                    
                    // 移除所有布局类
                    testList.classList.remove('grid-layout', 'list-layout', 'compact-layout');
                    
                    // 添加选中的布局类
                    testList.classList.add(`${viewType}-layout`);
                    
                    // 对于紧凑视图，需要特殊处理卡片结构
                    if (viewType === 'compact') {
                        document.querySelectorAll('.test-card').forEach(card => {
                            card.classList.add('compact-item');
                            card.classList.remove('no-image-card', 'single-image-card', 'multi-image-card', 'list-item');
                        });
                    } else if (viewType === 'list') {
                        document.querySelectorAll('.test-card').forEach(card => {
                            card.classList.add('list-item');
                            card.classList.remove('compact-item', 'no-image-card', 'single-image-card', 'multi-image-card');
                        });
                    } else {
                        // 恢复网格视图的卡片类型
                        const cards = document.querySelectorAll('.test-card');
                        cards[0].classList.add('no-image-card');
                        cards[1].classList.add('single-image-card');
                        cards[2].classList.add('multi-image-card');
                        cards[3].classList.add('no-image-card');
                        cards[4].classList.add('single-image-card');
                        cards[5].classList.add('multi-image-card');
                        
                        cards.forEach(card => {
                            card.classList.remove('compact-item', 'list-item');
                        });
                    }
                });
            });
            
            // 分类切换功能
            const categoryItems = document.querySelectorAll('.category-item');
            categoryItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 移除所有活跃状态
                    categoryItems.forEach(cat => cat.classList.remove('active'));
                    
                    // 添加当前分类活跃状态
                    this.classList.add('active');
                });
            });
            
            // 点赞功能
            const likeBtns = document.querySelectorAll('.action-btn:not(.saved)');
            likeBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    
                    if (this.classList.contains('liked')) {
                        // 取消点赞
                        this.classList.remove('liked');
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        
                        // 更新点赞数
                        if (this.textContent.trim().match(/\d+/)) {
                            let count = parseInt(this.textContent.trim().match(/\d+/)[0]);
                            this.innerHTML = `<i class="${icon.classList.value}"></i> <span>${count - 1}</span>`;
                        }
                    } else {
                        // 点赞
                        this.classList.add('liked');
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        
                        // 更新点赞数
                        if (this.textContent.trim().match(/\d+/)) {
                            let count = parseInt(this.textContent.trim().match(/\d+/)[0]);
                            this.innerHTML = `<i class="${icon.classList.value}"></i> <span>${count + 1}</span>`;
                        }
                    }
                });
            });
            
            // 收藏功能
            const saveBtns = document.querySelectorAll('.action-btn.saved, .action-btn:has(.fa-bookmark:not(.fa-heart))');
            saveBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    
                    if (this.classList.contains('saved')) {
                        // 取消收藏
                        this.classList.remove('saved');
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                    } else {
                        // 收藏
                        this.classList.add('saved');
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                    }
                });
            });
            
            // 移除筛选标签
            const removeFilterBtns = document.querySelectorAll('.remove-filter');
            removeFilterBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    this.closest('.active-filter-tag').remove();
                    
                    // 如果没有筛选标签了，隐藏整个筛选结果提示
                    if (document.querySelectorAll('.active-filter-tag').length === 0) {
                        document.querySelector('.filter-results').style.display = 'none';
                    }
                });
            });
            
            // 清除全部筛选
            document.querySelector('.filter-results .btn').addEventListener('click', function() {
                document.querySelector('.filter-results').style.display = 'none';
                
                // 重置所有筛选条件
                document.querySelectorAll('.form-check-input').forEach(checkbox => {
                    checkbox.checked = false;
                });
                
                // 重置一些默认选中项
                document.querySelectorAll('#category1, #category2, #category3, #duration1, #rating1, #time1').forEach(el => {
                    el.checked = true;
                });
                
                // 重置滑块
                rangeSlider.value = 5000;
                rangeValue.textContent = '5,000+';
            });
            
            // 重置筛选按钮
            document.querySelector('.btn-reset').addEventListener('click', function() {
                document.querySelector('.filter-results').style.display = 'none';
                
                // 重置所有筛选条件
                document.querySelectorAll('.form-check-input').forEach(checkbox => {
                    checkbox.checked = false;
                });
                
                // 重置一些默认选中项
                document.querySelectorAll('#category1, #category2, #category3, #duration1, #rating1, #time1').forEach(el => {
                    el.checked = true;
                });
                
                // 重置搜索框
                document.querySelector('.search-input').value = '';
                
                // 重置滑块
                rangeSlider.value = 5000;
                rangeValue.textContent = '5,000+';
            });
            
            // 应用筛选按钮
            document.querySelector('.btn-apply').addEventListener('click', function() {
                // 显示筛选结果提示
                document.querySelector('.filter-results').style.display = 'flex';
            });
            
            // 分页功能
            const pageLinks = document.querySelectorAll('.page-link:not([aria-label])');
            pageLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有活跃状态
                    document.querySelectorAll('.page-item').forEach(item => {
                        item.classList.remove('active');
                    });
                    
                    // 添加当前页活跃状态
                    this.parentElement.classList.add('active');
                });
            });
        });
    </script>
</body>
</html>
    
